<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="nav-title">订单</view>
			<view class="nav-right">
				<text class="more-icon">⋯</text>
			</view>
		</view>
		<!-- 订单类型切换 -->
		<!-- 搜索框 -->
		<view class="search-section">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input class="search-input" placeholder="请输入商家名/手机号/订单号" v-model="searchKeyword" />
			</view>
		</view>

		<!-- 订单状态筛选 -->
		<view class="status-tabs">
			<view class="status-tab" :class="{ active: currentStatus === 'all' }" @click="switchStatus('all')">
				全部
			</view>
			<view class="status-tab" :class="{ active: currentStatus === 'pending' }" @click="switchStatus('pending')">
				<text>待付款</text>
				<view v-if="statusCounts.pending > 0" class="status-badge">{{ statusCounts.pending }}</view>
			</view>
			<view class="status-tab" :class="{ active: currentStatus === 'paid' }" @click="switchStatus('paid')">
				待收货
			</view>
			<view class="status-tab" :class="{ active: currentStatus === 'pickup' }" @click="switchStatus('pickup')">
				待自提
			</view>
			<view class="status-tab" :class="{ active: currentStatus === 'refund' }" @click="switchStatus('refund')">
				退款/售后
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list" :class="{ 'transitioning': isTransitioning }">
			<view v-for="(order, index) in filteredOrders" :key="order.orderId" class="order-item"
				:class="{ 'refund-order': order.isAfterSales === 1 }"
				:style="{ 'animation-delay': (index * 0.05) + 's' }" @click="viewOrderDetail(order)">
				<view class="order-header">
					<view class="merchant-info">
						<image class="merchant-logo" src="/static/default-shop.png" mode="aspectFill"></image>
						<view class="merchant-name-wrapper">
							<text class="merchant-name">{{ order.shopAddress || '商家' }}</text>
							<text v-if="getOrderStatusText(order.orderStatus)" class="status-tag"
								:class="getOrderStatusClass(order.orderStatus)">
								{{ getOrderStatusText(order.orderStatus) }}
							</text>
						</view>
					</view>
					<view class="payment-method">{{ getPayTypeText(order.payType) }}</view>
				</view>

				<view class="order-content">
					<view class="product-info">
						<text class="product-name">订单号: {{ order.orderNo }}</text>
						<text class="product-spec" v-if="order.orderDesc">{{ order.orderDesc }}</text>
					</view>
					<view class="order-quantity" v-if="order.queueNum">排队号: {{ order.queueNum }}</view>
					<view class="order-price">¥ {{ order.realPrice || order.orderPrice }}</view>
				</view>

				<view class="order-footer">
					<view class="order-time">{{ formatTime(order.orderCreateTime) }}</view>
					<view class="order-actions" @click.stop>
						<button v-if="order.orderStatus === 1" class="action-btn primary" @click="payOrder(order)">
							立即付款
						</button>
						<button v-if="order.orderStatus === 4 && order.deliveryType === 1" class="action-btn"
							@click="confirmReceived(order)">
							确认收货
						</button>
						<button v-if="order.orderStatus === 2 && order.deliveryType === 2" class="action-btn"
							@click="confirmPickup(order)">
							确认自提
						</button>
						<button v-if="order.orderStatus === 7" class="action-btn" @click="viewRefundDetail(order)">
							售后详情
						</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="filteredOrders.length === 0 && !isTransitioning" class="empty-state">
			<text class="empty-icon">📦</text>
			<text class="empty-text">暂无相关订单</text>
		</view>
	</view>
</template>

<script>
	import {
		get,
		post,
		del,
		getWithoutAuth
	} from '@/utils/request';
	import {
		auth
	} from '@/utils/auth.js';
	import env from '@/config/env';
	export default {
		data() {
			return {
				orderType: 'mall', // takeout: 外卖订单, mall: 商城订单
				currentStatus: 'all', // all, pending, paid, pickup, refund
				searchKeyword: '',
				statusCounts: {
					pending: 0,
					paid: 0,
					pickup: 0,
					refund: 0
				},
				isTransitioning: false,
				orders: [],
				userId: null
			}
		},
		computed: {
			filteredOrders() {
				let filtered = this.orders;

				// 按状态筛选
				if (this.currentStatus !== 'all') {
					filtered = filtered.filter(order => {
						switch (this.currentStatus) {
							case 'pending':
								return order.orderStatus === 1; // 待支付
							case 'paid':
								// 待收货：包括待发货、待配送、配送中
								return [2, 3, 4].includes(order.orderStatus);
							case 'pickup':
								// 待自提：根据配送方式判断，如果是自提类型的订单且待发货
								return order.orderStatus === 2 && order.deliveryType === 2;
							case 'refund':
								return order.orderStatus === 7; // 售后处理中
							default:
								return true;
						}
					});
				}

				// 按关键词搜索
				if (this.searchKeyword) {
					filtered = filtered.filter(order =>
						(order.shopAddress && order.shopAddress.includes(this.searchKeyword)) ||
						(order.orderNo && order.orderNo.includes(this.searchKeyword)) ||
						(order.obligatePhone && order.obligatePhone.includes(this.searchKeyword))
					);
				}

				return filtered;
			}
		},
		onLoad(options) {
			console.log('订单列表页面 onLoad 触发');
			// 接收页面参数，设置默认状态
			if (options.status) {
				this.currentStatus = options.status;
			}
			if (options.type) {
				this.orderType = options.type;
			}

			// 获取用户ID并加载订单信息
			if (this.getUserId()) {
				this.loadOrdersInfo();
			}
		},

		onShow() {
			console.log('订单列表页面 onShow 触发');
			// 页面显示时检查登录状态，但不重复跳转
			if (!this.userId && auth.isLoggedIn()) {
				console.log('用户ID不存在但已登录，重新获取用户信息');
				const userInfo = auth.getUserInfo();
				if (userInfo && (userInfo.userId || userInfo.id || userInfo.user_id)) {
					this.userId = userInfo.userId || userInfo.id || userInfo.user_id;
					console.log('重新设置用户ID:', this.userId);
					this.loadOrdersInfo();
				}
			}
		},
		methods: {
			// 获取用户ID
			getUserId() {
				try {
					// 使用auth工具获取用户信息
					const userInfo = auth.getUserInfo();
					console.log('从auth获取到的用户信息:', userInfo);
					console.log('用户信息类型:', typeof userInfo);

					// 检查多种可能的用户ID字段
					let userId = null;
					if (userInfo && typeof userInfo === 'object') {
						userId = userInfo.userId || userInfo.id || userInfo.user_id;
					}

					console.log('解析出的用户ID:', userId);

					if (userId) {
						this.userId = userId;
						console.log('设置用户ID成功:', this.userId);
						return true;
					} else {
						// 检查是否有token但用户信息丢失
						const token = auth.getToken();
						console.log('token:', token);

						if (token) {
							console.log('有token但用户信息丢失，尝试重新获取用户信息');
							// 可以在这里调用获取用户信息的接口
							uni.showToast({
								title: '用户信息异常，请重新登录',
								icon: 'none'
							});
						} else {
							console.log('未找到任何登录信息');
							uni.showToast({
								title: '请先登录',
								icon: 'none'
							});
						}

						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}, 1500);
						return false;
					}
				} catch (error) {
					console.error('获取用户信息时发生错误:', error);
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					});
					return false;
				}
			},

			async loadOrdersInfo() {
				if (!this.userId) {
					console.error('用户ID不存在');
					return;
				}

				try {
					// 根据用户ID获取订单列表 - 临时使用直接请求测试
					const testUrl = `http://localhost:9204/orders/getAllOrdersByUserId/${this.userId}`;
					console.log('请求订单列表，用户ID:', this.userId);
					console.log('完整请求URL:', testUrl);
					
					// 临时使用 uni.request 直接测试
					const res = await new Promise((resolve, reject) => {
						uni.request({
							url: testUrl,
							method: 'GET',
							header: {
								'Content-Type': 'application/json'
							},
							success: (response) => {
								console.log('直接请求响应:', response);
								resolve(response.data);
							},
							fail: (error) => {
								console.error('直接请求失败:', error);
								reject(error);
							}
						});
					});
					
					console.log('API返回结果:', res);

					// 处理返回数据格式
					let orderData = [];
					console.log('返回数据类型:', typeof res);
					console.log('是否为数组:', Array.isArray(res));
					
					if (Array.isArray(res)) {
						// 如果直接返回数组
						console.log('数据格式：直接数组');
						orderData = res;
					} else if (res && res.code === 200 && res.data) {
						// 如果返回格式是 {code: 200, data: [...]}
						console.log('数据格式：{code: 200, data: [...]}');
						orderData = Array.isArray(res.data) ? res.data : [];
					} else if (res && Array.isArray(res.data)) {
						// 如果数据在 data 字段中
						console.log('数据格式：{data: [...]}');
						orderData = res.data;
					} else if (res && (res.code === 500 || res.code === 404)) {
						// 服务器错误
						console.error('服务器错误:', res);
						uni.showToast({
							title: res.msg || '服务器错误',
							icon: 'none'
						});
						orderData = [];
					} else {
						console.warn('未知的返回数据格式:', res);
						orderData = [];
					}

					this.orders = orderData;
					this.calculateStatusCounts();
					console.log("订单结果", this.orders);
				} catch (error) {
					console.error('请求失败:', error);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
					this.orders = [];
				}
			},

			// 计算各状态订单数量
			calculateStatusCounts() {
				this.statusCounts = {
					pending: 0,
					paid: 0,
					pickup: 0,
					refund: 0
				};

				this.orders.forEach(order => {
					// 待支付
					if (order.orderStatus === 1) {
						this.statusCounts.pending++;
					}
					// 待收货：包括待发货、待配送、配送中
					else if ([2, 3, 4].includes(order.orderStatus)) {
						// 如果是配送订单，归类为待收货
						if (order.deliveryType === 1) {
							this.statusCounts.paid++;
						}
						// 如果是自提订单且状态为待发货，归类为待自提
						else if (order.deliveryType === 2 && order.orderStatus === 2) {
							this.statusCounts.pickup++;
						}
					}
					// 售后处理中
					else if (order.orderStatus === 7) {
						this.statusCounts.refund++;
					}
				});
			},

			// 获取订单状态文本
			getOrderStatusText(orderStatus) {
				switch (orderStatus) {
					case 1:
						return '待支付';
					case 2:
						return '待发货';
					case 3:
						return '待配送';
					case 4:
						return '配送中';
					case 5:
						return '已完成';
					case 6:
						return '已取消';
					case 7:
						return '售后处理中';
					default:
						return '';
				}
			},

			// 获取订单状态样式类
			getOrderStatusClass(orderStatus) {
				switch (orderStatus) {
					case 1:
						return 'pending';
					case 2:
						return 'preparing';
					case 3:
					case 4:
						return 'shipping';
					case 5:
						return 'completed';
					case 6:
						return 'cancelled';
					case 7:
						return 'refund';
					default:
						return '';
				}
			},

			// 获取支付方式文本
			getPayTypeText(payType) {
				switch (payType) {
					case 1:
						return '微信支付';
					case 2:
						return '支付宝';
					case 3:
						return '现金支付';
					case 4:
						return '银行卡';
					default:
						return '未知';
				}
			},

			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '';

				const date = new Date(timestamp);
				const now = new Date();
				const diff = now - date;

				// 如果是今天
				if (diff < 24 * 60 * 60 * 1000 && date.getDate() === now.getDate()) {
					return date.toLocaleTimeString('zh-CN', {
						hour: '2-digit',
						minute: '2-digit'
					});
				}

				// 如果是昨天
				const yesterday = new Date(now);
				yesterday.setDate(yesterday.getDate() - 1);
				if (date.getDate() === yesterday.getDate()) {
					return '昨天 ' + date.toLocaleTimeString('zh-CN', {
						hour: '2-digit',
						minute: '2-digit'
					});
				}

				// 其他日期
				return date.toLocaleDateString('zh-CN') + ' ' +
					date.toLocaleTimeString('zh-CN', {
						hour: '2-digit',
						minute: '2-digit'
					});
			},
			goBack() {
				uni.navigateBack();
			},

			switchOrderType(type) {
				this.orderType = type;
				// 这里可以重新加载对应类型的订单数据
				this.loadOrders();
			},

			switchStatus(status) {
				if (this.currentStatus === status || this.isTransitioning) return;

				this.isTransitioning = true;

				// 更快的切换时间，让动画更丝滑
				setTimeout(() => {
					this.currentStatus = status;

					// 下一帧重置过渡状态
					this.$nextTick(() => {
						setTimeout(() => {
							this.isTransitioning = false;
						}, 200);
					});
				}, 80);
			},

			loadOrders() {
				// 模拟加载订单数据
				console.log('加载订单数据:', this.orderType);
			},

			viewOrderDetail(order) {
				console.log('点击订单详情，当前用户ID:', this.userId);
				console.log('点击的订单信息:', order);

				// 检查用户登录状态
				if (!this.userId) {
					console.log('用户ID不存在，重新获取用户信息');
					// 使用auth工具重新获取用户信息
					const userInfo = auth.getUserInfo();
					console.log('重新获取的用户信息:', userInfo);

					if (!userInfo || (!userInfo.userId && !userInfo.id && !userInfo.user_id)) {
						uni.showModal({
							title: '提示',
							content: '登录状态已过期，请重新登录',
							showCancel: false,
							success: () => {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						});
						return;
					} else {
						// 重新设置用户ID
						this.userId = userInfo.userId || userInfo.id || userInfo.user_id;
					}
				}

				console.log('准备跳转订单详情，用户ID:', this.userId);

				// 根据订单状态跳转到不同的详情页面
				if (order.isAfterSales === 1) {
					// 售后订单跳转到售后详情页面
					this.viewRefundDetail(order);
				} else {
					// 其他订单跳转到通用订单详情页面
					uni.navigateTo({
						url: `/pages/orderDetail/orderDetail?orderId=${order.orderId}&orderNo=${order.orderNo}`,
						success: () => {
							console.log('跳转订单详情成功');
						},
						fail: (err) => {
							console.error('跳转订单详情失败:', err);
						}
					});
				}
			},

			async payOrder(order) {
				uni.showModal({
					title: '确认支付',
					content: `确认支付 ¥${order.realPrice || order.orderPrice} 吗？`,
					success: async (res) => {
						if (res.confirm) {
							try {
								// 调用支付接口
								const payRes = await post('/orders/pay', {
									orderId: order.orderId,
									orderNo: order.orderNo,
									payType: order.payType
								});

								if (payRes.success) {
									uni.showToast({
										title: '支付成功',
										icon: 'success'
									});
									// 更新订单状态：支付成功后变为待发货
									order.orderStatus = 2;
									order.payTime = new Date().getTime();
									this.calculateStatusCounts();
								} else {
									uni.showToast({
										title: payRes.message || '支付失败',
										icon: 'none'
									});
								}
							} catch (error) {
								console.error('支付失败:', error);
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},

			async confirmReceived(order) {
				uni.showModal({
					title: '确认收货',
					content: '确认已收到商品吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								const confirmRes = await post('/orders/confirm', {
									orderId: order.orderId,
									orderNo: order.orderNo,
									type: 'received'
								});

								if (confirmRes.success) {
									uni.showToast({
										title: '确认收货成功',
										icon: 'success'
									});
									order.orderStatus = 5; // 已完成
									order.orderCompleteTime = new Date().getTime();
									this.calculateStatusCounts();
								} else {
									uni.showToast({
										title: confirmRes.message || '操作失败',
										icon: 'none'
									});
								}
							} catch (error) {
								console.error('确认收货失败:', error);
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},

			async confirmPickup(order) {
				uni.showModal({
					title: '确认自提',
					content: '确认已自提商品吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								const confirmRes = await post('/orders/confirm', {
									orderId: order.orderId,
									orderNo: order.orderNo,
									type: 'pickup'
								});

								if (confirmRes.success) {
									uni.showToast({
										title: '确认自提成功',
										icon: 'success'
									});
									order.orderStatus = 5; // 已完成
									order.orderCompleteTime = new Date().getTime();
									this.calculateStatusCounts();
								} else {
									uni.showToast({
										title: confirmRes.message || '操作失败',
										icon: 'none'
									});
								}
							} catch (error) {
								console.error('确认自提失败:', error);
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								});
							}
						}
					}
				});
			},

			viewRefundDetail(order) {
				uni.navigateTo({
					url: `/pages/refundDetail/refundDetail?orderId=${order.orderId}&orderNo=${order.orderNo}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
		min-height: 100vh;
	}

	/* 导航栏 */
	.nav-bar {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		padding-top: calc(20rpx + var(--status-bar-height, 0));
		box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.15);
		position: relative;
		z-index: 100;
	}

	.nav-left,
	.nav-right {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		position: relative;
	}

	.nav-left::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50rpx;
		opacity: 0;
		transform: scale(0.8);
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.nav-left:active::before {
		opacity: 1;
		transform: scale(1);
	}

	.nav-left:active {
		transform: scale(0.95);
	}

	.back-icon {
		font-size: 48rpx;
		color: white;
		font-weight: bold;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		z-index: 1;
	}

	.more-icon {
		font-size: 36rpx;
		color: white;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		z-index: 1;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: bold;
		color: white;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	/* 订单类型切换 */
	.order-type-tabs {
		background: white;
		display: flex;
		padding: 0 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		position: relative;
		z-index: 10;
	}

	.type-tab {
		flex: 1;
		text-align: center;
		padding: 35rpx 0;
		font-size: 32rpx;
		font-weight: 500;
		color: #666;
		border-bottom: 4rpx solid transparent;
		transition: all 0.3s ease;
		position: relative;
	}

	.type-tab.active {
		color: #667eea;
		border-bottom-color: #667eea;
		background: linear-gradient(180deg, transparent 0%, rgba(102, 126, 234, 0.05) 100%);
	}

	.type-tab.active::before {
		content: '';
		position: absolute;
		bottom: -4rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
		border-radius: 2rpx;
	}

	/* 搜索框 */
	.search-section {
		background: white;
		padding: 25rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.search-box {
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		border-radius: 50rpx;
		padding: 25rpx 35rpx;
		display: flex;
		align-items: center;
		border: 2rpx solid transparent;
		transition: all 0.3s ease;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.search-box:focus-within {
		border-color: #667eea;
		box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.15);
		transform: translateY(-2rpx);
	}

	.search-icon {
		margin-right: 25rpx;
		font-size: 32rpx;
		color: #667eea;
	}

	.search-input {
		flex: 1;
		font-size: 30rpx;
		color: #333;
		background: transparent;
	}

	/* 订单状态筛选 */
	.status-tabs {
		background: white;
		display: flex;
		padding: 25rpx 15rpx;
		border-bottom: 1rpx solid #f0f0f0;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
	}

	.status-tab {
		flex: 1;
		text-align: center;
		padding: 20rpx 8rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #666;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
		margin: 0 5rpx;
		cursor: pointer;
	}

	.status-tab::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
		border-radius: 20rpx;
		opacity: 0;
		transform: scale(0.9);
		transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
	}

	.status-tab.active {
		color: #667eea;
		transform: translateY(-2rpx);
	}

	.status-tab.active::before {
		opacity: 1;
		transform: scale(1);
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.15);
	}

	.status-tab:active {
		transform: translateY(0) scale(0.98);
	}

	.status-badge {
		position: absolute;
		top: 8rpx;
		right: 15rpx;
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
		color: white;
		font-size: 18rpx;
		font-weight: bold;
		padding: 6rpx 10rpx;
		border-radius: 15rpx;
		min-width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
		animation: pulse 2s infinite;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.05);
		}

		100% {
			transform: scale(1);
		}
	}

	/* 订单列表 */
	.order-list {
		padding: 25rpx 30rpx;
		transition: all 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
	}

	.order-list.transitioning {
		opacity: 0;
		transform: translateY(15rpx);
	}

	.order-item {
		background: white;
		border-radius: 24rpx;
		padding: 35rpx;
		margin-bottom: 25rpx;
		box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.08);
		cursor: pointer;
		transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		position: relative;
		overflow: hidden;
		border: 1rpx solid rgba(255, 255, 255, 0.8);
	}

	.order-item::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4rpx;
		background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.order-item:hover::before,
	.order-item:active::before {
		opacity: 1;
	}

	.order-item:active {
		transform: translateY(2rpx) scale(0.995);
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.12);
	}

	/* 售后订单特殊样式 */
	.order-item.refund-order {
		border-left: 6rpx solid #ff6b6b;
		position: relative;
		background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
	}

	.order-item.refund-order::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(255, 107, 107, 0.03) 0%, transparent 50%);
		border-radius: 24rpx;
		pointer-events: none;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 25rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f8f9fa;
	}

	.merchant-info {
		display: flex;
		align-items: center;
	}

	.merchant-logo {
		width: 70rpx;
		height: 70rpx;
		border-radius: 16rpx;
		margin-right: 25rpx;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		border: 2rpx solid rgba(255, 255, 255, 0.8);
	}

	.merchant-name-wrapper {
		display: flex;
		align-items: center;
		gap: 18rpx;
	}

	.merchant-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
		letter-spacing: 0.5rpx;
	}

	.status-tag {
		font-size: 20rpx;
		font-weight: 600;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		line-height: 1;
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
	}

	.status-tag.refund {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
	}

	.status-tag.pending {
		background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(255, 167, 38, 0.3);
	}

	.status-tag.paid {
		background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(66, 165, 245, 0.3);
	}

	.status-tag.pickup {
		background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(102, 187, 106, 0.3);
	}

	.status-tag.completed {
		background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
	}

	.status-tag.cancelled {
		background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(158, 158, 158, 0.3);
	}

	.status-tag.preparing {
		background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);
	}

	.status-tag.shipping {
		background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(33, 150, 243, 0.3);
	}

	.payment-method {
		font-size: 26rpx;
		color: #667eea;
		font-weight: 500;
		background: rgba(102, 126, 234, 0.1);
		padding: 8rpx 16rpx;
		border-radius: 16rpx;
	}

	.order-content {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
		padding: 20rpx;
		background: linear-gradient(135deg, #f8f9fa 0%, rgba(102, 126, 234, 0.02) 100%);
		border-radius: 16rpx;
		border: 1rpx solid rgba(102, 126, 234, 0.08);
	}

	.product-info {
		flex: 1;
	}

	.product-name {
		font-size: 30rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 12rpx;
		line-height: 1.4;
	}

	.product-spec {
		font-size: 26rpx;
		color: #7f8c8d;
		background: rgba(255, 255, 255, 0.8);
		padding: 6rpx 12rpx;
		border-radius: 12rpx;
		display: inline-block;
	}

	.order-quantity {
		font-size: 28rpx;
		color: #667eea;
		font-weight: 600;
		margin-right: 35rpx;
		background: rgba(102, 126, 234, 0.1);
		padding: 8rpx 16rpx;
		border-radius: 16rpx;
	}

	.order-price {
		font-size: 36rpx;
		font-weight: 700;
		color: #e74c3c;
		text-shadow: 0 1rpx 2rpx rgba(231, 76, 60, 0.1);
	}

	.order-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
		border-top: 1rpx solid #f8f9fa;
	}

	.order-time {
		font-size: 26rpx;
		color: #95a5a6;
		font-weight: 500;
		background: rgba(149, 165, 166, 0.1);
		padding: 8rpx 16rpx;
		border-radius: 16rpx;
	}

	.order-actions {
		display: flex;
		gap: 15rpx;
	}

	.action-btn {
		padding: 16rpx 32rpx;
		border-radius: 25rpx;
		font-size: 26rpx;
		font-weight: 600;
		border: 2rpx solid #e9ecef;
		background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
		color: #6c757d;
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		position: relative;
		overflow: hidden;
	}

	.action-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
		transition: left 0.5s;
	}

	.action-btn:hover::before {
		left: 100%;
	}

	.action-btn:active {
		transform: translateY(1rpx);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.action-btn.primary {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		border-color: #667eea;
		box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
	}

	.action-btn.primary:active {
		box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.4);
	}

	/* 空状态 */
	.empty-state {
		text-align: center;
		padding: 120rpx 60rpx;
		background: white;
		margin: 30rpx;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.08);
		animation: fadeInScale 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 40rpx;
		display: block;
		opacity: 0.6;
		animation: float 3s ease-in-out infinite;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0px);
		}

		50% {
			transform: translateY(-10px);
		}
	}

	.empty-text {
		font-size: 32rpx;
		color: #7f8c8d;
		font-weight: 500;
		line-height: 1.5;
	}



	/* 页面进入动画 */
	.order-item {
		animation: fadeInUp 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) both;
		opacity: 0;
		transform: translateY(20rpx);
	}

	.order-list.transitioning .order-item {
		animation: none;
		opacity: 0;
		transform: translateY(10rpx);
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20rpx) scale(0.98);
		}

		to {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
	}

	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.order-content {
			flex-direction: column;
			align-items: flex-start;
			gap: 15rpx;
		}

		.order-quantity {
			margin-right: 0;
		}

		.order-footer {
			flex-direction: column;
			gap: 20rpx;
			align-items: flex-start;
		}

		.order-actions {
			width: 100%;
			justify-content: flex-end;
		}
	}
</style>